<template>
  <div>
    <a-table 
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
    >

      <template slot="name" slot-scope="text">
        <span style="color:red;"> {{ text }} </span>
      </template>

      <template slot="age" slot-scope="text">
        <span style="color:red;"> {{ text }} </span>
      </template>

      <template slot="address" slot-scope="text">
        <span style="color:red;"> {{ text }} </span>
      </template>

    </a-table>
  </div>
</template>

<script>
import TableMain from '../../components/drugCommon/TableMain'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
    scopedSlots: { customRender: 'age' },
  },
  {
    title: 'Address',
    dataIndex: 'address',
    scopedSlots: { customRender: 'address' },
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 23,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
  },
];
export default {
  name: 'e2',
  components:{
    TableMain
  },
  data(){
    return{
      columns,
      data  
      
    }
  },

  created(){
  },

  methods: {
    onSelectChange(){
      console.log("-table-select-change-");
    }
  },

  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  }

}
</script>


<style lang="less" scoped>
 
</style>
